<template>
    <div class="recommend-page">
      <!-- 轮播图区域 -->
      <el-carousel height="28vw" class="carousel">
        <el-carousel-item>
          <img src="https://dummyimage.com/375x120/4ab7bd/fff&text=义务教育信息科技教学指南" class="carousel-img" />
        </el-carousel-item>
      </el-carousel>
  
      <!-- 直播专区 -->
      <div class="section live-section">
        <div class="section-header">
          <h3>直播专区</h3>
          <el-icon><ArrowRight /></el-icon>
        </div>
        <div class="live-list">
          <div class="live-card" v-for="live in liveList" :key="live.title">
            <img :src="live.cover" class="live-cover"/>
            <div class="live-info">
              <div class="live-status">
                <el-icon><VideoPlay /></el-icon>
                <span>{{ live.status }}</span>
              </div>
              <div class="live-title">{{ live.title }}</div>
              <div class="live-meta">
                <span class="school">{{ live.school }}</span>
                <div class="live-data">
                  <span class="time">{{ live.time }}</span>
                  <span class="views">🔥{{ live.views }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 活动专区 -->
      <div class="section activity-section">
        <div class="section-header">
          <h3>活动专区</h3>
          <el-icon><ArrowRight /></el-icon>
        </div>
        <div class="activity-list">
          <div class="activity-card" v-for="activity in activityList" :key="activity.title">
            <img :src="activity.cover" class="activity-cover"/>
            <div class="activity-info">
              <div class="activity-tag" :class="activity.status === '进行中' ? 'ongoing' : 'ended'">
                {{ activity.status }}
              </div>
              <div class="activity-title">{{ activity.title }}</div>
              <div class="activity-time">{{ activity.time }}</div>
              <el-button v-if="activity.status === '进行中'" 
                         type="primary" 
                         class="join-btn"
                         size="small">
                参与
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { VideoPlay, ArrowRight } from '@element-plus/icons-vue'
  
  const liveList = [
    {
      title: '普通高中语文学科整本书阅读的设计与实施',
      cover: 'https://dummyimage.com/160x90/f0f0f0/333&text=语文课程',
      status: '回放',
      school: '智慧中小学',
      time: '2025/04/18 14:30',
      views: '9.7万'
    }
  ]
  
  const activityList = [
    {
      title: '中小学读书分享活动',
      cover: 'https://dummyimage.com/335x120/ffe4c4/333&text=读书分享',
      status: '进行中',
      time: '2024/08/31-2025/08/31'
    },
    {
      title: '2024年学科课程活动',
      cover: 'https://dummyimage.com/335x120/b0e0e6/333&text=课程活动',
      status: '已结束',
      time: '2024/09/01-2024/09/30'
    }
  ]
  </script>
  
  <style scoped>
  .recommend-page {
    padding: 2vw 3vw;
    padding-bottom: 14vw;
  }
  
  .carousel {
    margin-bottom: 3vw;
  }
  
  .carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2vw;
  }
  
  .section {
    background: #fff;
    border-radius: 2vw;
    padding: 3vw;
    margin-bottom: 3vw;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3vw;
  }
  
  .section-header h3 {
    font-size: 4vw;
    font-weight: 500;
    margin: 0;
  }
  
  .live-card {
    display: flex;
    gap: 3vw;
    margin-bottom: 3vw;
  }
  
  .live-cover {
    width: 40vw;
    height: 22.5vw;
    border-radius: 1vw;
    object-fit: cover;
  }
  
  .live-info {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .live-status {
    display: flex;
    align-items: center;
    gap: 1vw;
    color: #666;
    font-size: 3.2vw;
  }
  
  .live-title {
    font-size: 3.8vw;
    font-weight: 500;
    margin: 1vw 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .live-meta {
    margin-top: auto;
    font-size: 3.2vw;
    color: #666;
  }
  
  .school {
    display: block;
    margin-bottom: 1vw;
  }
  
  .live-data {
    display: flex;
    justify-content: space-between;
  }
  
  .activity-card {
    position: relative;
    margin-bottom: 3vw;
  }
  
  .activity-cover {
    width: 100%;
    height: 30vw;
    border-radius: 2vw;
    object-fit: cover;
  }
  
  .activity-info {
    padding: 2vw 0;
  }
  
  .activity-tag {
    display: inline-block;
    padding: 1vw 2vw;
    border-radius: 1vw;
    font-size: 3.2vw;
    margin-bottom: 2vw;
  }
  
  .activity-tag.ongoing {
    background: #f56c6c;
    color: #fff;
  }
  
  .activity-tag.ended {
    background: #909399;
    color: #fff;
  }
  
  .activity-title {
    font-size: 3.8vw;
    font-weight: 500;
    margin-bottom: 2vw;
  }
  
  .activity-time {
    font-size: 3.2vw;
    color: #666;
  }
  
  .join-btn {
    position: absolute;
    right: 0;
    bottom: 2vw;
  }
  </style>